/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
    PureComponent,
    PropTypes
} from 'react';
import {render} from '../../renderer';
import {Enhance as FormItem} from '../form-item';
import * as cx from 'classnames';
import { Transfer, Button } from 'antd';
import './button.css';
import './checkbox.css';
import './input.css';
import 'transfer.css';

@FormItem({
    type: 'antd-transfer'
})
export default class AntdTransfer extends PureComponent {
    static propTypes = {
        className: PropTypes.string,
        formMode: PropTypes.string,
        formHorizontal: PropTypes.object,
        inputClassName: PropTypes.string
    };

    static defaultProps = {
        value: '',
        org_sel: [],
        org_unsel: [],
    };

    constructor(props) {
        super(props);


        this.state = {
            options: props.options,
            mockData: [],
            targetKeys: [],
        };
    }

    componentWillReceiveProps(nextProps) {
        const props = this.props;

        if (props.sourceFetching && !nextProps.sourceFetching && nextProps.sourceData) {
            const sourceData = nextProps.sourceData;
            let org_sel = sourceData && sourceData.hasOwnProperty('org_sel') ? sourceData.org_sel : sourceData;
            let org_unsel = sourceData && sourceData.hasOwnProperty('org_unsel') ? sourceData.org_unsel : sourceData;
            const all = [], sel = [];
            if (org_sel && org_sel.length > 0) {
                org_sel.map((item) => {
                    all.push({
                        key: item.id.toString(),
                        name: item.name,
                    });
                    sel.push(item.id.toString())
                })
            }

            if (org_unsel && org_unsel.length > 0) {
                org_unsel.map((item) => {
                    all.push({
                        key: item.id.toString(),
                        name: item.name,
                    })
                })
            }
            // console.log(all, sel);
            this.setState({
                mockData: all,
                targetKeys: sel,
            }, () => sourceData.hasOwnProperty('value') && this.props.setValue(sourceData.value));
        }
    }


    handleChange = (targetKeys) => {
        // const value = [];
        this.setState({targetKeys});
        // if (targetKeys && targetKeys.length > 0) {
        //     targetKeys.map((item) => {
        //         value.push(item.id);
        //     })
        // }
        this.props.setValue(targetKeys);
        console.info(targetKeys);

    };

    renderFooter = () => {
        return (
            <Button
                size="small"
                style={{float: 'right', margin: 5}}
                onClick={this.getMock}
            >
                reload
            </Button>
        );
    };


    render() {
        const {
            disabled,
            inputClassName,
            placeholder,
            ignoreAddress
        } = this.props;

        console.log(this.state);
        return (
            <div
                className={cx('module-settings-control m-t', inputClassName)}
            >
                <Transfer
                    dataSource={this.state.mockData}
                    showSearch
                    listStyle={{
                        width: 250,
                        height: 300,
                    }}
                    // operations={['to right', 'to left']}
                    locale={{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入机构名称' }}
                    titles={["未添加机构列表", "已添加机构列表"]}
                    lazy={false}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={item => `${item.key} - ${item.name}`}
                    // footer={this.renderFooter}
                />
            </div>
        );
    }
}
